<template>
  <div class="my-echart" style="width: 100%;height: 100%">
    <Echart  ref="echart" :options="optionsData" :id="echartId" @chartItemClick="chartItemClick"/>
  </div>
</template>

<script>
import Echart from './init'
export default {
  name: "EchartIndex",
  data () {
    return {
      echartId:this.id,
      optionsData: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    id:{
      type: String,
      required: false,
      default: ""
    },
    options:{
      type: Object,
      default: ()=>({})
    }
  },
  watch:{
    options:{
      handler (newData) {
        this.optionsData = newData;
      },
      immediate: true,
      deep: true
    }
  },
  methods:{
    chartItemClick(val){
      this.$emit("chartItemClick", val);
    },
    resize(){
      this.$refs.echart.resize();
    }
  }
}
</script>
<style lang="scss" scoped>
.my-echart{
}
</style>

